<template>
    <layout>
        <div class="wrapper">

            <!-- 展示提交的内容 -->
            <template v-if="contentVisible">
                <van-button color="#66A242" block  round class="take-picture" plain icon="photograph" @click="getIdCardImg">身份证拍照识别</van-button>
                <van-cell :title="existNum" class="check" v-show="historyDiv">
                    <template>
                        <van-button type="primary" size="small" @click="viewApplyUsers">点击查看</van-button>
                    </template>
                </van-cell>

                <!-- 快捷登记的信息 -->
                <div class="register-wrapper" v-show="historyList.length!=0">
                    <div class="register">快捷登记</div>
                    <van-radio-group v-model="personInfo">
                        <van-cell-group>
                            <van-cell
                                v-for="item in historyList"
                                :title="item.name+'-'+item.idCard"
                                clickable
                                @click="clickRadio(item)"
                            >
                                <template #right-icon>
                                    <van-radio :name="item"/>
                                </template>
                            </van-cell>
                        </van-cell-group>
                    </van-radio-group>
                </div>
                <!-- 表单 -->
                <van-form class="form" @submit="onSubmit">
                    <van-field
                        name="name"
                        v-model.trim="formData.name"
                        label="姓名"
                        placeholder="请输入姓名"
                        clearable
                        required
                        @input="validateValue"
                        :rules="[{required:true,message:'请输入姓名'}]"
                        >

                    </van-field>
                    <van-field
                        name="cardTypeName"
                        :value="cardTypeName"
                        readonly
                        label="证件类型"
                        placeholder="请选择证件类型"
                        @click="idCardshowPicker = true"
                        required
                        >

                    </van-field>
                    <van-field
                        name="idCard"
                        label="证件号"
                        v-model="formData.idCard"
                        placeholder="请输入证件号码"
                        required
                        :rules="[{required:true,message:'请输入证件号码'},{validator:validatorIdCard,message:'身份证格式错误'}]"
                        >
                    </van-field>

                    <van-field
                        v-if="formData.cardType==2"
                        name="sexSelect"
                        label="性别"
                        :rules="[{required:true,message:'请选择年龄'}]"
                        required>
                        <template #input>
                            <van-radio-group v-model="formData.sex" direction="horizontal">
                                <van-radio :name="1">男</van-radio>
                                <van-radio :name="2">女</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field
                        v-if="formData.cardType==2"
                        name="age"
                        v-model="formData.age"
                        type="digit"
                        label="年龄"
                        placeholder="请输入年龄"
                        :rules="[{required:true,message:'请输入年龄'}]"
                        required
                        clearable>

                    </van-field>

                    <van-field
                        name="phone"
                        label="手机号"
                        type="tel"
                        v-model="formData.phone"
                        required
                        placeholder="请输入手机号"
                        :rules="[{ required: true, message: '请填写手机号' },{pattern:/^\d{11}$/,message:'手机号格式错误'}]"
                        clearable>
                    </van-field>

                    <van-field
                        name="address"
                        label="详细地址"
                        v-model="formData.address"
                        placeholder="请输入详细地址"
                        required
                        clearable
                        :rules="[{ required: true, message: '请输入详细地址' },{validator:validatorAddress,message:'地址格式错误'}]">
                    </van-field>

                    <van-field
                        name="job"
                        label="职业"
                        readonly
                        v-model="formData.job"
                        placeholder="请输入职业"
                        required
                        @click="jobShowPicker=true"
                        :rules="[{ required: true, message: '请输入职业' }]"
                        clearable>
                    </van-field>

                    <van-field
                        v-show="price_box"
                        class="payPrice"
                        name="payPrice"
                        label="需支付金额"
                        :value="formData.payPrice"
                        placeholder=""
                        readonly
                        >
                    </van-field>
                    <div class="btn">
                        <!-- <van-button round block type="info" @click="confirmTipVisible = true">提 交</van-button> -->
                        <van-button round block type="info" native-type="submit">提 交</van-button>
                    </div>

                </van-form>
            </template>


            <!-- 展示二维码的信息 -->
            <div v-show="!contentVisible">
                
                <div class="qrcode-container">
                    <div class="timer-wrapper" v-show="time">
                        
                        <div>
                            <span>生成时间:</span>
                            {{time}}
                        </div>
                    </div>
                    <div class="qrcode-wrapper">
                        <div ref="qrcode">

                        </div>
                        <div class="title">
                            请截图保存该图片，以供工作人员录入信息！
                        </div>
                    </div>

                    <div class="qrcodeInfo">
                        <van-cell-group>
                            <van-cell title="姓名：" :value="formData.name" />
                            <van-cell title="身份证：" :value="formData.idCard" />
                            <van-cell title="所属预约编号：" :value="applyId" />
                            <van-cell title="个人信息编号" :value="'No.'+applyUserId" />
                        </van-cell-group>
                    </div>
			    </div>

                <div class="footer">
                    <van-row class="title">关联的公众号</van-row>
                    <van-row class="content" type="flex" justify="space-between" align="center">
                        <van-col class="left">
                            <img src="../../assets/images/logo.png" alt="检测中心">
                        </van-col>
                        <van-col class="middle">
                            <div class="large">
                                康来智慧服务
                            </div>
                            <div class="mini">
                                全面了解检验项目临床的意义，做你身边...
                            </div>
                        </van-col>
                        <van-col class="right">
                            <van-button plain type="primary" @click="bindOfficial">关注</van-button>
                        </van-col>
                    </van-row>
                 </div>
            </div>



            <!-- 身份证弹框 -->
            <van-popup v-model="idCardshowPicker" round position="bottom">
                <van-picker
                    show-toolbar
                    value-key="text"
                    :columns="idCardOption"
                    @confirm="onConfirm"
                    @cancel="idCardshowPicker = false"
                />
            </van-popup>

            <!-- 职业选择弹框 -->
            <van-popup v-model="jobShowPicker" round position="bottom">
                <van-picker
                    show-toolbar
                    value-key="text"
                    :columns="jobOption"
                    @confirm="jobComfirm"
                    @cancel="jobShowPicker = false">

                </van-picker>
            </van-popup>

            <!-- 提交确认弹框 -->
            <van-dialog
                class="tip"
                show-cancel-button
                title="请确认信息"
                v-model="confirmTipVisible"
                @confirm="confirmSubmit">
                <van-row class="item">
                    <van-col span="8" class="left-text">姓名：</van-col>
                    <van-col span="16" class="right-text">{{formData.name}}</van-col>
                </van-row>
                <van-row class="item">
                    <van-col span="8" class="left-text">身份证：</van-col>
                    <van-col span="16" class="right-text"><span class="number">{{formData.idCard}}</span></van-col>
                </van-row>
                <van-row class="item">
                    <van-col span="8" class="left-text">联系电话：</van-col>
                    <van-col span="16" class="right-text"><span class="number">{{formData.phone}}</span></van-col>
                </van-row>
            </van-dialog>
        </div>
    </layout>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

import nucleicApi from '@/api/nucleic.js'
import nucleicMessageApi from "@/api/nucleicMessage.js"
import QRcode from "qrcodejs2"
export default {
  name:"nucleicMessage",
// import引入的组件需要注入到对象中才能使用
  components: {},
  data  () {
// 这里存放数据
    return {
        openId:"",
        // 预约编号
        applyId:"",
        // 个人信息编号
        applyUserId:"",
        idCardOption:[
            {text:'大陆身份证',value:1},
            {text:'非大陆身份证',value:2},
        ],
        jobOption:[
            {text:'教育工作者',value:"教育工作者"},
            {text:'学生',value:'学生'},
            {text:'工人',value:'工人'},
            {text:'军人',value:'军人'},
            {text:'医护人员',value:'医护人员'},
            {text:'服务员',value:'服务员'},
            {text:'员工',value:'员工'},
            {text:'理发师',value:'理发师'},
            {text:'个体经营',value:'个体经营'},
            {text:'无职人员',value:'无职人员'},
            {text:'其他',value:'其他'}
        ],
        existNum:"已预约多少人",
        cardTypeName:"大陆身份证",
        formData:{
            name:"",
            idCard:"",
            cardType:1,
            sex:"",
            age:"",
            phone:"",
            address:"",
            job:"",
            payPrice:'',
        },
        // 点击快捷登录的个人信息
        personInfo:"",
        //支付状态
        isPay:"",
        // 价格
        price:"",
        mustPhone:"",
        // 展示内容，为true展示为false就展示二维码信息
        contentVisible:true,
        // 年龄是否显示
        showAge:true,
        // 性别是否显示
        showSex:true,
        // 是否显示身份证的弹框
        idCardshowPicker:false,
        // 是否展示职业弹框
        jobShowPicker:false,
        // 需支付金额这个字段是否显示
        price_box:false,
        // 点击查看这行是否显示
        historyDiv:false,
        // 提交时确认弹框的展示
        confirmTipVisible:false,
        historyList:[],
        // 二维码的信息
        barcode:{
            msg:"",
            apply:"",
            applyUserId:"",
            title:"",
            time:"",
        },
        // 二维码生成时间
        time:"",
    }
  },
// 监听属性 类似于data概念
  computed: {},
// 监控data中的数据变化
  watch: {
    "formData.cardType"(newValue){
        if(newValue==1){
            this.cardTypeName = "大陆身份证"
        }else if(newValue==2){
            this.cardTypeName = "非大陆身份证"
        }

    }
  },
// 方法集合
  methods: {
    init(){
        // this.getHistoryList()
        // this.getApplyInfo();
        // this.getHistoryUser();
        if(this.$route.query.state&&this.$route.query.code){
            this.applyId = this.$route.query.state
            this.getOpenId()
        }else{
            this.$dialog.alert({
                title:"提示",
                message:"请退出页面，重新进入，否者此次申请无效！"
            }).then(res=>{
                WeixinJSBridge.call("closeWindow");
            })
        }
    },
    getOpenId(){
        let params={
            code:this.$route.query.code
        }
        nucleicApi.getOpenId(params)
            .then(res=>{
                if(res.status==0){
                    if(res.data){
                        this.openId = res.data
                        this.getHistoryList()
                        this.getApplyInfo();
                        this.getHistoryUser();
                    }else{
                         // 关闭当前界面 回退公众号栏
                         this.$dialog.alert({
                            title:"提示",
                            message:"请退出页面，重新进入，否者此次申请无效!"
                         }).then(res=>{
                            window.close();
                            WeixinJSBridge.call('closeWindow');
                         })

                        // alert("请退出页面，重新进入，否者此次申请无效！");
                        return;
                    }
                }else{
                    this.$dialog.alert({
                        title:"提示",
                        message:res.msg
                    })
                    return;
                }
            })
    },
    // 获取申请采样信息
    getApplyInfo() {
        let params = {
            id:this.applyId
        }
        nucleicMessageApi.getApplyInfo(params).then(res=>{
            if(res.status==0 && res.data != null){
                this.isPay = res.data.isHsPay;
                console.log('getApplyInfo>res>isPay',this.isPay)
                this.price = res.data.price;
                this.mustPhone = res.data.mustPhone;
                // 拿到手机号是否必填选项
                if (res.data.isHsPay == 2){
                    this.price_box = true;
                    this.formData.payPrice = res.data.price
                }
            }else{
                this.$dialog.alert({
                    title:"提示",
                    message:"该采样未开始或已结束！请退出页面！"
                }).then(res=>{
                    window.close();
                    WeixinJSBridge.call('closeWindow');
                })

            }
        })
    },
    // 获取用户列表
    getHistoryUser() {
        let params = {
            applyId:this.applyId,
            openId:this.openId,
        }
        nucleicMessageApi.getUserList(params).then(res=>{
            if(res.status==0){
                let list = res.data
                if(list.length>0){
                    this.historyDiv = true;
                    // this.historyButton = true;
                    this.existNum = "已预约"+list.length+"人";
                }
            }
        })
    },
    // 获取历史列表
      getHistoryList(){
        let params = {
            openId:this.openId
        }
        nucleicMessageApi.getListHistory(params).then(res=>{
            if(res.status==0){
                if(res.data){
                    this.historyList = res.data
                    console.log('historyList',this.historyList)
                }
            }
        })

    },
    // 身份证弹框确认
    onConfirm(obj){
        this.formData.cardType = obj.value
        this.idCardshowPicker = false
    },
    // 职业确认弹框
    jobComfirm(obj){
        this.formData.job = obj.value
        this.jobShowPicker = false
    },
    // 选择一个快速登录
    clickRadio(value) {
        // personInfo这个值是用来选中目标项的
        this.personInfo = value
        this.formData.name = value.name;
        this.formData.idCard= value.idCard;
        this.formData.cardType= value.cardType;
        this.formData.sex= value.sex;
        this.formData.age= value.age;
        this.formData.address = value.address;
        this.formData.job = value.job;
        this.formData.phone= value.phone;
        if(this.formData.cardType==1){
            this.showAge = false
            this.showSex = false
        }else{
            this.showAge = true
            this.showSex = true
        }
    },
    // 点击查看去采样列表页面
    viewApplyUsers(){
        this.$router.push({
            path:"/applyUserList",
            query:{
                applyId:this.applyId,
                openId:this.openId
            }
        })
    },
    // 身份证拍照识别
    getIdCardImg(){
        var _this = this;
        // 这里需要编码
        let url =  encodeURIComponent(window.location.href.split("#")[0])
        nucleicMessageApi.getJsApiConfig({url:url})
            .then(res=>{
                console.log(res,477)
                if(res.status==0){
                    _this.$wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: res.data.appId, // 必填，公众号的唯一标识
                        timestamp: res.data.timestamp, // 必填，生成签名的时间戳
                        nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
                        signature: res.data.signature, // 必填，签名
                        jsApiList: [
                            'chooseImage',
                            'getLocalImgData'
                        ] // 必填，需要使用的JS接口列表
                    });

                        // config之后会自动调用ready方法
                        _this.$wx.ready(function() {

                            // 验证接口是否注册完成
                            _this.$wx.checkJsApi({
                                jsApiList: [
                                    'chooseImage',
                                    'getLocalImgData'
                                ],
                                success: function(res) {
                                    console.log("888");
                                }
                            });

                            //拍照或从手机相册中选图接口
                            _this.$wx.chooseImage({
                                count: 1, // 默认9
                                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                                //sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                                sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
                                success: function (res) {
                                    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                                    var localId = localIds[0].toString();
                                    //获取本地图片接口
                                    _this.$wx.getLocalImgData({
                                        localId: localId, // 图片的localID
                                        success: function (res) {
                                            var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                                            // 获取身份证信息
                                            _this.getIdCardInfo(localData);
                                        }
                                    });
                                }/*,
                                cancel: function() {
                                    // 用户取消拍照或从手机相册中选图
                                    //alert('已取消');
                                }*/
                            });

                        });
                }else{
                    this.$dialog.alert({
                        title:"提示",
                        message:res.msg
                    })
                    return;
                }
            })
    },
    // 拍照识别的时候获取身份证信息
    getIdCardInfo(val){
        var params = {
            byteFile : val
        };
        nucleicMessageApi.getIdCardFront(params)
            .then(res=>{
                if(res.status==0){
                    this.formData.name = res.data.name
                    this.formData.idCard = res.data.idCard
                }else{
                    this.$dialog.alert({
                        title:"提示",
                        message:res.msg
                    })
                    return;
                }
            })
            .catch(err=>{
                this.$dialog.alert({
                    title:"错误",
                    message:err
                })
            })
    },
    // 点击关联公众号
    bindOfficial(){
        var bindUrl = "https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzAxODMwMTMxNw==&scene=124#wechat_redirect"
        window.location.href = bindUrl;
    },
    // 身份证校验
    validatorIdCard(value){
        value = value.replace(/\s+/g,"")
        if(value.replace(/\s+/g,"") == ''|| (value.length != 18 && value.length != 15)){
            // alert("请输入正确的身份证");
            return false;
        }
        if (this.formData.cardType == 1){
            if(value.replace(/^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,"") != ""){
                // alert("身份证日期有误，请重试！");
                return false;
            }
        }
    },
    // 地址校验
    validatorAddress(value){
        value = value.replace(/\s+/g,"")
        if(!value||value.length<8){
            return false
        }
    },
    onSubmit(){
        if(this.formData.cardType==2){
            this.$dialog.alert({
                title:"提示",
                message:"检测到您选中的是非大陆身份证，请仔细确认姓名、年龄等信息"
            }).then(res=>{
                this.confirmTipVisible = true
            })
        }else{
            this.confirmTipVisible = true
        }

    },
    // 确认提交
    confirmSubmit(){
        let params = {
            name:this.formData.name.replace(/\s+/g,""),
            idCard:this.formData.idCard,
            phone:this.formData.phone,
            cardType:this.formData.cardType,
            age:this.formData.age,
            sex:this.formData.sex,
            address:this.formData.address.replace(/\s+/g,""),
            job:this.formData.job.replace(/\s+/g,""),
            applyId:this.applyId,
            openId:this.openId,
        }
        // 提交遮罩
        let toast = this.$toast.loading({
            // 0表示一直显示遮罩
            duration:0,
            overlay:true,
            message:"提交中"
        })
        if(this.isPay==2){
            nucleicMessageApi.getPayCount(params)
                .then(res=>{
                    toast.clear()
                    if(res.status==0){
                        if(res.data!=null&&res.data>0){
                            this.$toast.fail({
                                message:"当日内，同一个身份证只能购买一次，请勿重复支付"
                            })
                        }else{
                            this.addApplyUser(params)
                        }
                    }else{
                        this.$toast.fail({
                            message:res.msg,

                        })
                    }
                })
                .catch(err=>{
                    // 成功后消除提示框
                    toast.clear()
                    this.$toast.fail({
                        message:err
                    })
                })
        }else{
            toast.clear()
            this.addApplyUser(params)
        }
    },
    addApplyUser(data) {
        //let IsPay = document.getElementById("isPay").value;
        data.isHsPay = this.isPay

        nucleicMessageApi.addUserInfo(data)
            .then(res=>{
                if(res.status==0){
                    this.applyUserId = res.data
                    if(this.isPay==2){
                        // 开通微信支付，开启支付
                        this.wxToPay()
                    }else{
                        // 没有开通核酸支付 进入填写信息的二维码
                        this.showQrCode()
                    }
                }else{
                    this.$dialog.alert({
                        title:"提示",
                        message:res.msg
                    })
                }
            })
            .catch(err=>{
                this.$dialog.alert({
                    title:"错误",
                    message:err
                })
            })
    },
    wxToPay() {
        var _this = this
        console.log("微信支付")
        let params = {
            applyUserId:Number(_this.applyUserId),
            actualPay:Number(_this.price),
            payType:1
        }

        nucleicMessageApi.payUser(params)
            .then(res=>{
                if(res.status==0){
                    let payConfig = res.data
                    WeixinJSBridge.invoke(
                        'getBrandWCPayRequest', {
                            "appId":payConfig.appId,     //公众号ID，由商户传入
                            "timeStamp":payConfig.timeStamp,         //时间戳，自1970年以来的秒数
                            "nonceStr":payConfig.nonceStr, //随机串
                            "package":payConfig.package,
                            "signType":payConfig.signType,         //微信签名方式
                            "paySign":payConfig.paySign //微信签名
                        },
                        function(res){
                            //alert(res.err_msg);
                            if(res.err_msg == "get_brand_wcpay_request:ok"){
                                // 使用以上方式判断前端返回,微信团队郑重提示：
                                // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                // $("#loading").show();
                                // _this.loading = true;
                                let loadingToast =  _this.$toast({
                                    type:"loading",
                                    overlay:true,
                                    message:"提交中",
                                    duration:0
                                })

                                setTimeout(function() {
                                    loadingToast.close()
                                    // $("#loading").hide();
                                    // _this.loading = false;
                                    _this.checkIsPaySuccess();
                                }, 5000)
                                // 成功了 就显示二维码
                            }else {
                                // 提示支付失败
                                _this.deleteApplyUser();
                                _this.$dialog.alert({
                                    title:"提示",
                                    message:"支付失败"
                                })
                            }
                        });
                }
            })
            .catch(err=>{

                _this.$dialog.alert({
                    title:"错误",
                    message:err
                })
            })
    },
    checkIsPaySuccess() {
        var _this = this;
        nucleicMessageApi.getUserInfoById({applyUserId:_this.applyUserId})
            .then(res=>{
                if(res.status==0){
                    if(res.data.payState==1){
                        // infoData.paySuccess = true;
                        _this.showQrCode(true)
                    }else{
                        this.$dialog.alert({
                            title:'提示',
                            message:"未找到支付信息，请咨询工作人员"
                        })
                    }
                }else{
                    this.$dialog.alert({
                        title:'提示',
                        message:"未找到支付信息，请咨询工作人员"
                    })
                }
            })
    },
    deleteApplyUser() {
        var params = {
            id: Number(this.applyUserId),
            state: -1
        }
        nucleicMessageApi.deleteApplyUser(params)
            .then(res=>{
                if(res.status!=0){
                    this.$dialog.alert({
                        title:"提示",
                        message:res.msg
                    })
                }
            })
    },
    showQrCode(paySuccess = false) {
        this.$nextTick(()=>{
            new QRcode(this.$refs.qrcode,{
                text:this.applyUserId+"",
                width:220,
                height:220,
                correctLevel: 3
            });
        this.contentVisible = false
        })


        // this.barcode.msg = `${this.formData.name}[${this.formData.idCard}]`
        // this.barcode.apply = "所属预约编号："+this.applyId
        // this.barcode.applyUserId = "个人信息编号No."+this.applyUserId
        // this.barcode.title = "请截图保存该图片，以供工作人员录入信息！"
        if(paySuccess){
            let now = new Date( +new Date() + 8 * 3600 * 1000 ).toJSON().substr(0,19).replace("T"," ");
            this.time = now
        }
    },
    // 对名字特殊字符输入限制
    validateValue() {
        var IllegalString = "[`~!#$^&*()=|{}':;',\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？123456789]“”";
        var index = this.formData.name.length - 1;
        var s = this.formData.name.charAt(index);
        console.log(s)
        if (IllegalString.indexOf(s) >= 0) {
            s = this.formData.name.substring(0, index);
            this.formData.name = s;
            console.log('特殊符号-1')
        }

    },

  },
// 生命周期 - 创建完成（可以访问当前this实例）
  created  () {
  },
// 生命周期 - 挂载完成（可以访问DOM元素）
  mounted  () {
    this.init()
  },
  beforeCreate  () {}, // 生命周期 - 创建之前
  beforeMount  () {}, // 生命周期 - 挂载之前
  beforeUpdate  () {}, // 生命周期 - 更新之前
  updated  () {}, // 生命周期 - 更新之后
  beforeDestroy  () {}, // 生命周期 - 销毁之前
  destroyed  () {}, // 生命周期 - 销毁完成
  activated  () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.wrapper{
    margin:auto;
    // padding: 5px;
    width: 93%;
    .register-wrapper{
        margin: 10px auto;
        background: white;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,10%);
        border-radius: 10px;
        overflow: hidden;
        .register{
            font-size: 15px;
            text-align: center;
            line-height: 30px;
            font-weight: bold;
        }
    }
    .take-picture{
        width: 200px;
        margin: 10px auto;
    }
    .check{
        border-radius: 10px;
        align-items: center;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,10%);
        .van-button{
            height: 27px;
            border-radius: 4px;
        }
    }
    .form{
        background: white;
        border-radius: 10px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,10%);
        overflow: hidden;
        margin: 10px auto;
        .payPrice{
            &::v-deep input{
                -webkit-text-fill-color:red;
                color:red
            }

        }
        .btn{
            margin: 20px;
        }
    }
    .qrcode-container{
        box-shadow: 0 0 12px rgba(0,0,0,10%);
        background-color: white;
        margin: 10px 0;
        border-radius: 10px;
        padding: 20px 0;
        overflow: hidden;
        text-align: center;
        .timer-wrapper{
            color: red;
            font-size: 18px;
            margin: 10px 0;
        }
        .qrcode-wrapper{
            width: 220px;
            // height: 170px;
            margin: 0 auto;
            .qrcode{
                width: 220px;
            }
            &::v-deep{
                img{
                width: 100%;
                }
            }
            .title{
                color: red;
                margin: 15px 0;
                font-size: 18px;
            }
        }
        .qrcodeInfo{
            text-align: start;
        }
    }
    .footer {
        background-color: white;
        border-radius: 10px;
        padding: 10px 15px;
        margin: 10px 0;
        font-size: 13px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 10%);
        .title {
            color: #B6B6B6;
            padding-bottom: 10px;
        }

        .content {
            flex-wrap: nowrap;
            text-overflow: ellipsis;

            .left {
                img {
                    width: 50px;
                }
            }

            .middle {
                box-sizing: border-box;
                padding: 0 10px;

                .lagre {
                    font-size: 20px;
                }

                .mini {
                    font-size: 10px;
                    color: #B6B6B6;
                }
            }

            .right {
                .van-button {
                    width: 60px;
                    height: 25px;
                    border-radius: 4px;
                    font-size: 10px;
                }
            }
        }
    }
    .tip{
        .item{
            margin: 10px 0;
            .left-text{
                text-align: end;
            }
            .right-text{
                // display: flex;
                // align-items: center;
                text-align: start;
                padding-left: 14px;
            }
            .number{
                vertical-align: -4px;
            }
        }

    }
}
</style>
